<template>
  <div class="home-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>message封装</span>
      </div>
      <div class="message-wrapper">
        <el-button type="primary" @click="handleOneMessage"
          >只会触发3次的弹框(更新最新的弹框)</el-button
        >
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>dialog封装</span>
      </div>
      <dialog-component></dialog-component>
    </el-card>
    <el-card style="margin-top: 30px">
      <div slot="header" class="clearfix">
        <span>form封装</span>
      </div>
      <custom-from v-model="formModel" v-bind="formConfig" ref="customForm">
        <el-form-item slot="footer">
          <el-button type="primary" @click="handleSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </custom-from>
    </el-card>
  </div>
</template>

<script>
import dialogComponent from "./dialog/index.vue";
import customFrom from "./form/index.vue";
export default {
  components: { dialogComponent, customFrom },
  data() {
    return {
      index: 0,
      formModel: {
        name: "",
        region: "",
        date1: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        imageList: [],
        custom: "",
      },
      formConfig: {
        inline: false,
        labelWidth: "120px",
        rules: {
          name: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            {
              min: 3,
              max: 5,
              message: "长度在 3 到 5 个字符",
              trigger: "blur",
            },
          ],
          region: [
            { required: true, message: "请选择活动区域", trigger: "change" },
          ],
          detailArea: [
            {
              required: true,
              message: "请选择具体位置",
              trigger: "blur",
            },
            {
              validator: (rule, val, callback) => {
                if (this.formModel.region == "上海市") {
                  if (!this.formModel.detailArea) {
                    return callback(new Error("请选择具体位置"));
                  }
                }
                return callback();
              },
              trigger: ["change", "blur"],
            },
          ],
          date: [
            {
              type: "string",
              required: true,
              message: "请选择日期",
              trigger: "change",
            },
          ],
          type: [
            {
              type: "array",
              required: true,
              message: "请至少选择一个活动性质",
              trigger: "change",
            },
          ],
          resource: [
            { required: true, message: "请选择活动资源", trigger: "change" },
          ],
          desc: [
            { required: true, message: "请填写活动形式", trigger: "blur" },
          ],
        },
        formItemList: [
          {
            label: "活动名称：",
            type: "input",
            prop: "name",
            placeholder: "请输入活动名称",
            clearable: true,
          },
          {
            label: "活动区域：",
            type: "select",
            prop: "region",
            placeholder: "请选择活动区域",
            clearable: true,
            styleConfig: {
              width: "100%",
            },
            options: [
              {
                label: "上海市",
                value: "上海市",
              },
              {
                label: "武汉市",
                value: "武汉市",
              },
            ],
          },
          {
            show: "region=上海市",
            label: "具体位置：",
            type: "select",
            prop: "detailArea",
            placeholder: "请选择具体位置",
            clearable: true,
            styleConfig: {
              width: "100%",
            },
            options: [
              {
                label: "徐汇区",
                value: "徐汇区",
              },
              {
                label: "松江区",
                value: "松江区",
              },
            ],
          },
          {
            label: "活动时间：",
            type: "date",
            prop: "date",
            placeholder: "选择日期",
            clearable: true,
            "value-format": "yyyy-MM-dd",
          },
          {
            label: "即时配送：",
            type: "switch",
            prop: "delivery",
          },
          {
            label: "活动性质：",
            type: "checkbox",
            prop: "type",
            options: [
              {
                label: "美食/餐厅线上活动",
                value: "1",
              },
              {
                label: "地推活动",
                value: "2",
              },
              {
                label: "线下主题活动",
                value: "3",
              },
              {
                label: "单纯品牌曝光",
                value: "4",
              },
            ],
          },
          {
            label: "特殊资源：",
            type: "radio",
            prop: "resource",
            options: [
              {
                label: "线上品牌商赞助",
                value: "线上品牌商赞助",
              },
              {
                label: "线下场地免费",
                value: "线下场地免费",
              },
            ],
          },
          {
            label: "活动形式：",
            type: "textarea",
            prop: "desc",
          },
          {
            label: "上传图片：",
            type: "upload",
            prop: "imageList",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleOneMessage() {
      this.$message.config({
        maxCount: 3,
      });
      this.index++;
      this.$message({
        type: "error",
        message: "错误提示" + this.index,
      });
    },

    handleSubmit() {
      // this.$refs["customForm"].validate((valid) => {
      //   if (valid) {
      //     console.log(12313);
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
      console.log(this.$refs["customForm"]);
    },
  },
};
</script>
<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden auto;
  padding: 20px;
  .box-card {
    width: 100%;
    height: 300px;
    margin-top: 30px;
    &:first-of-type {
      margin-top: 0;
    }
    .message-wrapper {
      display: flex;
      align-items: center;
      .input-wrapper {
        margin-left: 20px;
        width: 150px;
      }
    }
  }
}
</style>
